<!DOCTYPE html>
<html>

<head>
  <title>Vue.js Pet Depot</title>
  <script src="https://unpkg.com/vue"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="assets/css/app.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.js"></script>
  <meta charset="UTF-8">
</head>

<body>
  <div class="container">
    <div id="app">
      <header>
        <div class="navbar navbar-default">
          <div class="navbar-header">
            <h1>{{ sitename }}</h1>
          </div>
          <div class="nav navbar-nav navbar-right cart">
            <button type="button" class="btn btn-default btn-lg" v-on:click="showCheckout">
              <span class="glyphicon glyphicon-shopping-cart">{{ cartItemCount}}</span> Checkout
            </button>
          </div>
        </div>
      </header>
      <main>
        <div v-if="showProduct">
          <div v-for="product in sortedProducts">
            <div class="row">
              <div class="col-md-5 col-md-offset-0">
                <figure>
                  <img class="product" v-bind:src="product.image">
                </figure>
              </div>
              <div class="col-md-6 col-md-offset-0 description">
                <h1 v-text="product.title"></h1>
                <p v-html="product.description"></p>
                <p class="price">
                  {{product.price | formatPrice}}
                </p>
                <button class=" btn btn-primary btn-lg" v-on:click="addToCart(product)" v-if="canAddToCart(product)">Add to cart</button>
                <button disabled="true" class=" btn btn-primary btn-lg" v-else>Add to cart</button>
                <span class="inventory-message" v-if="product.availableInventory - cartCount(product.id) === 0">All Out!
                </span>
                <span class="inventory-message" v-else-if="product.availableInventory - cartCount(product.id) < 5">
                  Only {{product.availableInventory - cartCount(product.id)}} left!
                </span>
                <span class="inventory-message" v-else>Buy Now!
                </span>
                <div class="rating">
                  <span v-bind:class="{'rating-active' :checkRating(n, product)}" v-for="n in 5">☆
                  </span>
                </div>
              </div>
              <!-- end of col-md-6-->
            </div>
            <!-- end of row-->
            <hr />
          </div>
          <!-- end of v-for-->
        </div>
        <!-- end of showProduct-->
        <div v-else>
          <div class="row">
            <div class="col-md-10 col-md-offset-1">
              <div class="panel panel-info">
                <div class="panel-heading">Pet Depot Checkout</div>
                <div class="panel-body">
                  <div class="form-group">
                    <div class="col-md-12">
                      <h4>
                        <strong>Enter Your Information</strong>
                      </h4>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-md-6">
                      <strong>First Name:</strong>
                      <input v-model.trim="order.firstName" class="form-control" />
                    </div>
                    <div class="col-md-6">
                      <strong>Last Name:</strong>
                      <input v-model.trim="order.lastName" class="form-control" />
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-md-12">
                      <strong>Address:</strong>
                    </div>
                    <div class="col-md-12">
                      <input v-model.trim="order.address" class="form-control" />
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-md-12">
                      <strong>City:</strong>
                    </div>
                    <div class="col-md-12">
                      <input v-model.trim="order.city" class="form-control" />
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-md-2">
                      <strong>State:</strong>
                      <select v-model="order.state" class="form-control">
                        <option disabled value="">State</option>
                        <option v-for="(state, key) in states" v-bind:value="state">
                          {{key}}
                        </option>
                      </select>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-md-6 col-md-offset-4">
                      <strong>Zip / Postal Code:</strong>
                      <input v-model.number="order.zip" class="form-control" type="number" />
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-md-6 boxes">
                      <input type="checkbox" id="gift" value="true" v-bind:true-value="order.sendGift" v-bind:false-value="order.dontSendGift"
                        v-model="order.gift">
                      <label for="gift">Ship As Gift?</label>
                    </div>
                  </div>
                  <!-- end of form-group -->
                  <div class="form-group">
                    <div class="col-md-6 boxes">
                      <input type="radio" id="home" v-bind:value="order.home" v-model="order.method">
                      <label for="home">Home</label>
                      <input type="radio" id="business" v-bind:value="order.business" v-model="order.method">
                      <label for="business">Business</label>
                    </div>
                  </div>
                  <!-- end of form-group-->
                  <div class="form-group">
                    <div class="col-md-6">
                      <button type="submit" class="btn btn-primary submit" v-on:click="submitForm">Place Order</button>
                    </div>
                    <!-- end of col-md-6-->
                  </div>
                  <!-- end of form-group-->
                  <div class="col-md-12 verify">
                    <pre>
                        First Name: {{order.firstName}}
                        Last Name: {{order.lastName}}
                        Address: {{order.address}}
                        City: {{order.city}}
                        Zip: {{order.zip}}
                        State: {{order.state}}
                        Method: {{order.method}}
                        Gift: {{order.gift}}
                      </pre>
                  </div>
                  <!-- end of col-md-12 verify-->
                </div>
                <!--end of panel-body-->
              </div>
              <!--end of panel panel-info-->


            </div>
            <!--end of col-md-10 col-md-offset-1-->
          </div>
          <!--end of row-->
        </div>
      </main>
    </div>
    <!-- end of app-->
  </div>


  <script type="text/javascript">
    var APP_LOG_LIFECYCLE_EVENTS = true;
    var webstore = new Vue({
      el: '#app',
      data: {
        sitename: "Vue.js Pet Depot",
        showProduct: true,
        a: false,
        states: {
          AL: 'Alabama',
          AK: 'Alaska',
          AR: 'Arizona',
          CA: 'California',
          NV: 'Nevada'
        },
        order: {
          firstName: '',
          lastName: '',
          address: '',
          city: '',
          zip: '',
          state: '',
          method: 'Home Address',
          business: 'Business Address',
          home: 'Home Address',
          gift: '',
          sendGift: 'Send As A Gift',
          dontSendGift: 'Do Not Send As A Gift'
        },
        products: {},
        cart: []
      },
      methods: {
        checkRating(n, myProduct) {
          return myProduct.rating - n >= 0;
        },
        addToCart(aProduct) {
          this.cart.push(aProduct.id);
        },
        showCheckout() {
          this.showProduct = this.showProduct ? false : true;
        },
        submitForm() {
          alert('Submitted');
        },
        canAddToCart(aProduct) {
          //return this.product.availableInventory > this.cartItemCount;
          return aProduct.availableInventory > this.cartCount(aProduct.id);
        },
        cartCount(id) {
          let count = 0;
          for (var i = 0; i < this.cart.length; i++) {
            if (this.cart[i] === id) {
              count++;
            }
          }
          return count;
        }
      },
      computed: {
        cartItemCount() {
          return this.cart.length || '';
        },
        sortedProducts() {
          if (this.products.length > 0) {
            let productsArray = this.products.slice(0);
            console.log(productsArray);
            console.log(this.products);
            function compare(a, b) {
              if (a.title.toLowerCase() < b.title.toLowerCase())
                return -1;
              if (a.title.toLowerCase() > b.title.toLowerCase())
                return 1;
              return 0;
            }
            return productsArray.sort(compare);
          }

        }
      },
      filters: {
        formatPrice(price) {	//#B
          if (!parseInt(price)) { return ""; }	//#C
          if (price > 99999) {	//#D
            var priceString = (price / 100).toFixed(2);	//#E
            var priceArray = priceString.split("").reverse();	//#F
            var index = 3;	//#F
            while (priceArray.length > index + 3) {	//#F
              priceArray.splice(index + 3, 0, ",");	//#F
              index += 4;	//#F
            }	//#F
            return "$" + priceArray.reverse().join("");	//#G
          } else {
            return "$" + (price / 100).toFixed(2);	//#H
          }
        }

      },
      beforeCreate: function () {	//#B
        if (APP_LOG_LIFECYCLE_EVENTS) {	//#B
          console.log("beforeCreate");	//#B
        }	//#B
      },	//#B
      created: function () {	//#C
        axios.get('./products.json')
          .then((response) => {
            this.products = response.data.products;
            console.log(this.products);
          });
      },	//#C
      beforeMount: function () {	//#D
        if (APP_LOG_LIFECYCLE_EVENTS) {	//#D
          console.log(" beforeMount");	//#D
        }	//#D
      },	//#D
      mounted: function () {	//#E
        if (APP_LOG_LIFECYCLE_EVENTS) {	//#E
          console.log(" mounted"); 	//#E
        } 	//#E
      },	//#E
      beforeUpdate: function () { 	//#F
        if (APP_LOG_LIFECYCLE_EVENTS) { 	//#F
          console.log("beforeUpdate"); 	//#F
        } 	//#F
      },	//#F
      updated: function () { 	//#G
        if (APP_LOG_LIFECYCLE_EVENTS) { 	//#G
          console.log("updated"); 	//#G
        } 	//#G
      },	//#G
      beforeDestroyed: function () { 	//#H
        if (APP_LOG_LIFECYCLE_EVENTS) { 	//#H
          console.log("beforeDestroyed "); 	//#H
        } 	//#H
      },	//#H
      destroyed: function () { 	//#I
        if (APP_LOG_LIFECYCLE_EVENTS) { 	//#I
          console.log("destroyed"); 	//#I
        } 	//#I
      }	//#I
    });
  </script>
</body>

</html>